// src/components/ProductCarousel.jsx
import React from 'react';
import { Card, Button } from 'antd';
import './ProductCarousel.css'

const ProductCarousel = () => {
  const products = [
    {
      title: "南涧手绘明信片",
      image: "/nanjian-postcard.jpg",
      price: "¥19.9",
      link: "https://s.click.taobao.com/xxxxxx"
    },
    {
      title: "特色野生菌干货",
      image: "/mushroom.jpg",
      price: "¥49.9",
      link: "https://s.click.taobao.com/yyyyyy"
    },
    {
      title: "非遗扎染布艺包",
      image: "/dye-bag.jpg",
      price: "¥89.9",
      link: "https://s.click.taobao.com/zzzzzz"
    },
    {
      title: "南涧普洱茶礼盒",
      image: "/tea-box.jpg",
      price: "¥129.9",
      link: "https://s.click.taobao.com/aaaaaa"
    },
    {
      title: "特色野生菌干货",
      image: "/mushroom.jpg",
      price: "¥49.9",
      link: "https://s.click.taobao.com/yyyyyy"
    },
    {
      title: "非遗扎染布艺包",
      image: "/dye-bag.jpg",
      price: "¥89.9",
      link: "https://s.click.taobao.com/zzzzzz"
    },
    {
      title: "南涧普洱茶礼盒",
      image: "/tea-box.jpg",
      price: "¥129.9",
      link: "https://s.click.taobao.com/aaaaaa"
    }
  ];

  return (
    <div  className="footer-section" style={{ padding: '40px 50px', backgroundColor: '#333333' }}>
      <h2>南涧文创 & 特产 </h2>
      
      <div 
        style={{ 
          display: 'flex', 
          overflowX: 'auto', 
          gap: '20px', 
          padding: '20px 0',
          scrollbarWidth: 'thin' 
        }}
      >
        {products.map((product, index) => (
          <Card 
            key={index} 
            hoverable 
            style={{ 
              width: 240, 
              flex: '0 0 auto', 
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
              transition: 'transform 0.3s'
            }}
          >
            <img 
              alt={product.title} 
              src={product.image} 
              style={{ width: '100%', height: 160, objectFit: 'cover' }} 
            />
            <Card.Meta 
              title={product.title} 
              description={<span style={{ color: '#1890ff' }}>{product.price}</span>} 
            />
            <Button 
              type="primary" 
              style={{ marginTop: 10, width: '100%' }}
              onClick={() => window.open(product.link, '_blank')}
            >
              去淘宝购买
            </Button>
          </Card>
        ))}
      </div>
      <br />
      <Button type="primary" shape="round" size={'middle'}>
            更多好物 | More
      </Button>
    </div>
  );
};

export default ProductCarousel;